<html>
  <head>
    <title>Canvas tutorial</title>
    <style type="text/css">
      canvas {
        display: block;
        margin: 200px auto;
        margin-bottom: 0;
      }
      .img {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>deva</div>
    <div>devb</div>
    <div>devb2</div>
    <div>deva2</div>
    <div>deva3</div>
    <div>devb3</div>
    <div>devb4</div>
    <div>devb5</div>
    <button id="but">恢复</button>
    <img id="img" src="" alt="" />
    <canvas id="tutorial" width="600" height="600"></canvas>
  </body>
  <script type="text/javascript">
    var canvas = document.getElementById("tutorial");
    var ctx = canvas.getContext("2d");
    var but = document.getElementById("but");
    var img = document.getElementById("img");
    var dataURL;
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 600, 600);
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.stroke();
    ctx.save();
    ctx.beginPath();
    ctx.font = "20px serif";
    ctx.fillStyle = "blue";
    ctx.fillText("Hello world", 150, 150);
    ctx.save();
    but.addEventListener("click", () => {
      //   console.log(ctx);
      //   ctx.restore();
      //   ctx.clearRect(0, 0, 600, 600);
      //   ctx.beginPath();
      dataURL = canvas.toDataURL();
      console.log(dataURL);
      img.style.display = "block";
      img.src = dataURL;
    });
  </script>
</html>
